﻿@model ShopKart.Areas.User.Models.ProductVm

@{
    ViewBag.Title = "Products";
    Layout = "~/Areas/User/Views/Shared/_UserLayout.cshtml";
}

<style>
    .product-tile {
        background-color: #44515D;
        /*height: 100px;*/
        color: #F1F3FA;
    }

        .product-tile .tile-body {
            margin-left: 10px !important;
            margin-right: 10px !important;
        }

        .product-tile .tile-footer {
            margin-left: 10px !important;
            margin-right: 10px !important;
        }

    .tile-body .img-responsive {
        padding-top: 20px;
    }

    .tile-footer span {
        float: right;
        padding-right: 20px;
    }
</style>


<div class="page-content-wrapper">
    <div class="page-content">
        <div class="row">
            @foreach (var product in Model.Products)
            {
                <div class="col-md-4">
                    <div class="product-tile">
                        <div class="row tile-body">
                            <div class="col-md-4">
                                <img class="img-responsive" src="~/UploadedFiles/@product.Image" alt="">
                            </div>
                            <div class="col-md-8">
                                <h4>@product.ProductName</h4>
                                <p> @product.Description </p>
                            </div>
                        </div>
                        <div class="tile-footer">
                            <div class="row">
                                <span>@product.Weight Kg</span>
                            </div>
                            <div class="row">
                                <span>@product.Price INR.</span>
                            </div>
                            <div class="row">
                                <div class="pull-right col-md-5">
                                    <button data-id="@product.ProductId" id="btnAddProductToCart_@product.ProductId" type="submit" class="btn green btnAddProductToCart ladda-button formSaveButton" data-style="zoom-in">
                                        <span class="ladda-label">Add To Cart</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            }
        </div>
    </div>
</div>



@section scripts{

    <script>
        $(function () {
            $('.btnAddProductToCart').on('click', function () {
                var productId = $(this).data('id');

                var UserCart = {
                    ProductId: productId
                }

                $('.btnAddProductToCart').skartAjax({
                    url: '@Url.Action("AddProductToCart", "Common", new {area = "User"})',
                    method: "POST",
                    data: JSON.stringify(UserCart),
                    processData: false,
                    loaderButtonSelector: '#btnAddProductToCart_' + productId,
                    contentType: "application/json; charset=utf-8",
                    success: function (data, textStatus, jqXhr) {
                        LoadUserCart();
                        StopButtonLoading('#btnAddProductToCart_' + productId);
                    }
                });
            });
        });
    </script>
}


